import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'
export default class Message extends Component {
    state = {
        messageArr: [
            {
                id: '01',
                title: "消息01"
            },
            {
                id: '02',
                title: "消息02"
            },
            {
                id: '03',
                title: "消息03"
            }
        ]
    }

    headleNav = (id, title) => {
        return () => {
            // params 编程式导航跳转
            this.props.history.push(`/home/message/detail/${id}/${title}`)
            console.log(this.props.history);
            // serach 编程式导航跳转
            // this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)


            // state 编程式导航跳转
            // this.props.history.push("/home/message/detail/", { id, title })

        }

    }
    render() {
        let { messageArr } = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map(item => {
                            return (
                                <li key={item.id}>
                                    {/* 向路由组件传递params参数 */}
                                    {/* <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link> */}

                                    <button onClick={this.headleNav(item.id, item.title)}>点击</button>
                                    {/* 向路由组件传递search、参数 */}
                                    {/* <Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}

                                    {/* 向路由组件传递state、参数 */}
                                    <Link to={{ pathname: "/home/message/detail", state: { id: item.id, title: item.title } }}>{item.title}</Link>
                                </li>
                            )
                        })
                    }

                </ul>
                <hr />
                {/* 声明接收params参数 */}
                <Route path="/home/message/detail/:id/:title" component={Detail} />

                {/* search参数 state 无需声明接收*/}
                {/* <Route path="/home/message/detail" component={Detail} /> */}

            </div>
        )
    }
}
